<!-- 1.js -->
<script>
export default{
  data(){ //vue对象中的数据
    return{
      message:"今天下雨了",
      price:3999,
      student:{
        stuId:101,
        stuName:"Allen",
        stuGender:'M'
      },
      number:10,
      isMarried:false,
      code:"<h3>html 代码</h3>",
      tip:"用户名必须要填写",
      msg1:"AAA",
      msg2:"BBB",
      btnStyle:{
        btn1:true,
        btnSize:true,
        fontSize:true
      },
      pageNum:1,
      pages:10,
      job:{
        jobMinSalary:4000,
        jobMaxSalary:4000
      },
      isJoinKill:true,
      productPrice:299,
      stuNameArr:["A","B","C"],
      couponList:[
        {couponId:101,
        couponName:"满减优惠券",
        couponPrice:30
        },
        {
          couponId:102,
          couponName:"新人优惠券",
          couponPrice:100
        },
        {
          couponId:103,
          couponName:"中秋活动",
          couponPrice:"80"
        }
      ],
      username:"allen",
      userpwd:"",
      sum:0,
    }
  },
  methods:{
    add(x,y){//方法中访问对象中的数据要，加上this
      this.sum = x+y;
      console.log("sum="+ this.sum)
    },
    fun1(){
      console.log("点击了一下按钮")
    }
  }
}
</script>
<!-- 2.html 
只能由一个跟标签 
-->
<template>
    <div>
        <h3>Hello.Vue3!</h3>
        message:{{ message }}<br/>
        price:{{ price }}<br/>
        studentId:{{ student.stuId }}<br/>
        studentName:{{ student.stuName }}<br/>
        studentGender:{{ student.stuGender }}<br/>
        number+1={{ number+1 }}<br/>
        {{ isMarried?"已婚":"未婚" }}<br/>

        <div v-html="code"></div><br/>
        {{  }}语法：<span>{{ tip }}</span><br/>
        v-text语法: <span v-text="tip"></span><br/>
        <h4 v-bind:type="msg1" 
            v-bind:title="msg2">
            v-bind绑定
        </h4>

        <button :class="btnStyle">确定</button>
        <button :class="btnStyle">取消</button>
        <br>
        <!-- v-if 不满足条件 源码中不会显示下一页 -->
        <a href="" v-if="pageNum!=1">上一页</a>
        当前是第{{ pageNum }}页
        <a href="" v-if="pageNum!=pages">下一页</a>
        <br>
        <!-- v-show 不满足条件 源码中会显示但是加了display=none,用了css属性将下一页隐藏了 -->
        <a href="" v-show="pageNum!=1">上一页</a>
        当前是第{{ pageNum }}页
        <a href="" v-show="pageNum!=pages">下一页</a>
        <br>
        职位薪资：<span  v-if="job.jobMinSalary==job.jobMaxSalary">{{ job.jobMinSalary }}元</span>
        <span v-else>{{ job.jobMinSalary }}元~{{ job.jobMaxSalary }}元</span>
        <br>
        <!-- 商品参与秒杀isJoinKill==true，价格样式改为红色 -->
        商品价格：
        <span :class="{KillStyle:isJoinKill}">{{ productPrice }}元</span>
        <br>
        <span v-for="(name) in stuNameArr " :key="name">
          {{ name }},
        </span>
        <br>
        <select >
          <option v-for="(c) in couponList" :key="c.couponId"> {{ c.couponName }}</option>
        </select>
        <br>
        <!-- v-mode双向绑定 -->
        用户名：<input type="text" v-model="username">{{ username }}<br>
        密码：<input type="password" v-model="userpwd">{{ userpwd }}<br>

        <h2>方法定义</h2>
        <button @click="add(10,20)">求和{{ sum }}</button><br>
        <button @click="fun1">单击</button>

    </div>
</template>
<!-- 3.css scoped:当前样式只在本页面有效-->
<style scoped>
  .btn1{
    border: none;
    background-color: red;
    color: white;
  }
  .btnSize{
    widows: 100px;
    height: 30px;
    margin-right: 10px;
  }
  .fontSize{
    font-size: 12px;
  }

  .KillStyle{
    color: red;
    font-size: 14px;
  }
</style>
